<template>
  <div class="main-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品管理</span>
      </div>
      
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="笔记本" name="bijiben">
          <el-button type="primary" @click="handleAdd('bijiben')">添加笔记本</el-button>
          <product-table :table="activeTab" ref="productTable"></product-table>
        </el-tab-pane>
        
        <el-tab-pane label="电脑主机" name="diannaozhuji">
          <el-button type="primary" @click="handleAdd('diannaozhuji')">添加主机</el-button>
          <product-table :table="activeTab" ref="productTable"></product-table>
        </el-tab-pane>
        
        <el-tab-pane label="硬件组装" name="yingjianzuzhuang">
          <el-button type="primary" @click="handleAdd('yingjianzuzhuang')">添加硬件</el-button>
          <product-table :table="activeTab" ref="productTable"></product-table>
        </el-tab-pane>
        
        <el-tab-pane label="电脑外设" name="diannaowaishe">
          <el-button type="primary" @click="handleAdd('diannaowaishe')">添加外设</el-button>
          <product-table :table="activeTab" ref="productTable"></product-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import ProductTable from './components/ProductTable'

export default {
  components: {
    ProductTable
  },
  data() {
    return {
      activeTab: 'bijiben'
    }
  },
  methods: {
    handleTabClick() {
      this.$refs.productTable.getList()
    },
    handleAdd(type) {
      this.$router.push(`/shangjia/${type}-manage`)
    }
  }
}
</script>